<script>
import {error} from "autoprefixer/lib/utils";
import quote from "./index.vue";
import quotedetail from "@/views/quotedetail/index.vue";

export default {
  data(){
    return{
      visible: false,
      details: {
        "id": "",
        "quoteNum": "",
        "enquireId": "",
        "enquireDetailId": "",
        "supplierId": "",
        "quoCompany": "",
        "quoAddress": "",
        "quoLinkman": "",
        "quoPhone": "",
        "quoFax": "",
        "quoEmail": "",
        "queTitle": "",
        "queDate": "",
        "endDate": "",
        "sumAmount": "",
        "overallPrice": "",
        "quoRemark": "",
        "status": "",
        quoteDetail:{
          "quoteId": "",
          "orderId": "",
          "materialCode": "",
          "materialName": "",
          "measureUnit": "",
          "standard": "",
          "factory": "",
          "prodYear": "",
          "wrap": "",
          "amount": "",
          "unitPrice": "",
          "sumPrice": "",
          "mixPrice": "",
          "otherPrice": "",
          "totalPrice": "",
          "startDate": "",
          "endDate": "",
        }

      }, //用于存储数据
      textarea: '',
      size:'',
      id: '',
    }
  },
  mounted(){
    let qid = this.$route.query.id;
    this.id = qid;
    this.getData()
  },
  methods:{
    //查询数据
    getData(){
      this.$http({
        url: this.$http.adornUrl(`/purchase/quote/info/${this.id}`),
        method: 'get',
      }).then((data) => {
        console.log(data)
        if (data && data.code === 200) {
          this.details = data.quote
        }
      })
    },
    //提交数据
    dataFormSubmit () {
      console.log(this.details)
        this.$http({
          url: this.$http.adornUrl(`/purchase/quote/update`),
          method: 'put',
          data: this.$http.adornData(
           this.details
          )
        }).then((data) => {
          if (data && data.code === 200) {
            console.log(this.details)
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
            this.getData()
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    goBack(){
      this.$router.go(-1);
    }
  }
}

</script>

<template>
  <div>
    <h4 style="color: #1870C0;text-align: center" >报价维护</h4>
    <hr>
    <p style="text-align: center;font-size: 12px;color: #00f">请不要在输入金额的地方输入单位(如:元、圆)，直接输入数字即可</p>
    <hr style="height: 3px; background-color: #9A9A9A">
    <p style="text-align: center;font-weight: 700">需求计划</p>
    <el-descriptions class="margin-top" :column="3" :size="size" border>
      <el-descriptions-item label="物资编码">
        {{details.quoteDetail.materialCode}}
      </el-descriptions-item>
      <el-descriptions-item label="物资名称">{{details.quoteDetail.materialName}}</el-descriptions-item>
      <el-descriptions-item label="计量单位">{{details.quoteDetail.measureUnit}}</el-descriptions-item>
      <el-descriptions-item label="单价(元/含税)"><el-input size="mini" type="number" v-model="details.quoteDetail.unitPrice"></el-input></el-descriptions-item>
      <el-descriptions-item label="数量"><el-input size="mini" type="number" v-model.number="details.quoteDetail.amount"></el-input></el-descriptions-item>
      <el-descriptions-item label="总价(元/含税)"><el-input size="mini" type="number" readonly v-model.number="details.quoteDetail.unitPrice * details.quoteDetail.amount"></el-input></el-descriptions-item>
      <el-descriptions-item label="运杂费(元/含税)"><el-input size="mini" type="number" v-model.number="details.quoteDetail.mixPrice"></el-input></el-descriptions-item>
      <el-descriptions-item label="其他费用(元/含税)"><el-input size="mini" type="number" v-model.number="details.quoteDetail.otherPrice"></el-input></el-descriptions-item>
      <el-descriptions-item label="总计(元/含税)"><el-input size="mini" type="number" readonly v-model="details.quoteDetail.unitPrice * details.quoteDetail.amount +
        details.quoteDetail.mixPrice + details.quoteDetail.otherPrice">
      </el-input></el-descriptions-item>
      <el-descriptions-item label="起始到货期"><el-input size="mini" type="date" v-model="details.quoteDetail.startDate"></el-input></el-descriptions-item>
      <el-descriptions-item label="结束到货期"><el-input size="mini" type="date" v-model="details.quoteDetail.endDate"></el-input></el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" :column="2" :size="size" border>
      <el-descriptions-item label="数量合计"><el-input size="mini" type="number" v-model="details.sumAmount"></el-input></el-descriptions-item>
      <el-descriptions-item label="总金额(元)"><el-input size="mini" type="number" v-model="details.overallPrice"></el-input></el-descriptions-item>
      <el-descriptions-item label="报价书标题"><el-input size="mini" type="text" v-model="details.queTitle"></el-input></el-descriptions-item>
      <el-descriptions-item label="报价有效期"><el-input size="mini" type="date" v-model="details.endDate"></el-input></el-descriptions-item>
      <el-descriptions-item label="报价书说明">
        <el-input
          type="textarea"
          :rows="2"
          v-model="details.quoRemark">
        </el-input>
      </el-descriptions-item>
    </el-descriptions>
    <div class="bottom">
      <el-button type="primary" @click="dataFormSubmit">提交</el-button>
<!--      <el-button @click="reset">重置</el-button>-->
      <el-button @click="goBack">返回</el-button>

    </div>
  </div>
</template>

<style scoped lang="scss">
.cen{
  display: flex;
  flex-direction: column; /* 如果需要垂直居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 文本居中 */
}
.bottom{
  //margin-top: 20px;
  margin: 20px;
  text-align: right;
}
</style>
